<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>前后端交互</title>
</head>

<body>

    <!-- 
        Promise - 对象方法:
            - Promise.all() 并发处理多个异步任务,所有任务都执行完成才能得到结果
            - Promise.race() 并发处理多个异步任务,只要有一个任务完成就能得到结果
     -->

    <script>
        // console.dir(Promise)
        function queryData(url) {
            return  new Promise(function (resolve, reject) {
                var xhr = new XMLHttpRequest();

                xhr.onreadystatechange = function () {
                    if (xhr.readyState != 4) {
                        return;
                    }
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        // 处理正常的情况
                        resolve(xhr.responseText)
                    } else {
                        // 处理异常情况
                        reject('服务器错误');
                    }
                }

                xhr.open('get', url)
                xhr.send(null);
            })
        }

        var p1 = queryData('http://localhost:3000/a1');
        var p2 = queryData('http://localhost:3000/a2');
        var p3 = queryData('http://localhost:3000/a3');

        // Promise.all([p1,p2,p3]).then(function(result){
        //      // 这里返回的是一个数组, 结果和all的顺序一一对应    
        //     console.log(result)
        // })

        Promise.race([p1,p2,p3]).then(function(result){
            console.log(result)
        })
    </script>

</body>

</html>